<template>
  <div class="fullMain">
    <div style="position:fixed; width:100%; z-index:999" >
    <x-header :left-options="{backText: '',showBack: true}">
      群成员个人信息
    </x-header>
    </div>
    <!--插入验证提示框-->
    <div v-transfer-dom>
        <alert v-model="isShowAlert" > {{alertText}}</alert>
    </div>
    <div style="height:60px"/>
    <div class="info">
      <ul class="base">
        <li>
          <span>头像</span>
          <img class="info_img" v-bind:src="memberSelectedInfo.detail.avatar" alt=""/>
        </li>
        <div style="border:1px solid rgb(200,200,200);"/>
        <li>
          <span>真实姓名</span>
          <label class="info_label">{{memberSelectedInfo.detail.name}}</label>
        </li>
        <div style="border:1px solid rgb(200,200,200);"/>
        <li>
          <span>电话</span>
          <label class="info_label">{{memberSelectedInfo.detail.phone}}</label>
        </li>
        <div style="border:1px solid rgb(200,200,200);"/>
      </ul>
      <ul class="degree">
        <li>
          <span>学校</span>
          <label class="info_label">{{memberSelectedInfo.detail.place}}</label>
        </li>
        <!-- <li>
          <span>学号</span>
          <label class="info_label">{{memberSelectedInfo.detail.studentId}}</label>
        </li>
        <li>
          <span>导师</span>
          <label class="info_label">{{memberSelectedInfo.detail.tutor}}</label>
        </li> -->
      </ul>
    </div>
    <!-- @on-cancel="onCancel" -->
    <div v-transfer-dom>
      <confirm v-model="isShowConfirm"
      title=""
      @on-confirm="onConfirm">
        <p style="text-align:center;">{{confirmMessage}}</p>
      </confirm>
    </div>
    <div style="border:4px solid #bbb"/>

    <div v-if="isGroupAdmin || isGroupOwner">
      <x-switch :title="groupAdmin" :value-map="[false, true]" v-model="isSelectedAsGroupAdmin"
      @on-change="specifyGroupAdmin"></x-switch>
    </div><br>
    <x-button :gradients="['#B0C4DE', '#87CEFA']"  link="chat/G_personal_chat" action-type="button">发消息</x-button>
    <div style="height: 20px;width: 100%"></div>
    <div v-if="isGroupAdmin || isGroupOwner">
      <x-button type="warn" @click.native='deleteUser'>删除该成员</x-button>
    </div>
  </div>

</template>

<script>
  import {XHeader, XInput, XSwitch, Group, Cell,XButton,Confirm } from 'vux'
  import {mapState} from 'Vuex'
  import group from 'api/group'

  export default {
    name: 'S_information',
    data () {
      return {
        alertText: "", // 验证提示框的文本
        isShowAlert: false, // 是否显示验证提示框
        groupAdmin: "设置为该群管理员",
        isSelectedAsGroupAdmin: true,
        isShowConfirm:false,
        confirmMessage:''
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      ...mapState(['memberSelectedInfo', 'isGroupAdmin', 'isGroupOwner'])
    },
    mounted () {
      if (-1 === this.$store.state.groupPresent.detail.adminList.indexOf(this.$store.state.memberSelectedInfo.userId)) {
        this.isSelectedAsGroupAdmin = false
      }
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      showAlert(alertText){
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip(){
        this.isShowAlert = false
        this.alertText = ''
      },
      async specifyGroupAdmin() {
        var groupPresent = this.$store.state.groupPresent
        var memberSelected = this.$store.state.memberSelectedInfo
        var index = groupPresent.detail.adminList.indexOf(memberSelected.userId)
        if (this.isSelectedAsGroupAdmin) {
          if (index === -1) {
            groupPresent.detail.adminList.push(memberSelected.userId)
          }
        } else {
          if (index >= 0) {
            groupPresent.detail.adminList.splice(index, 1)
          }
        }

        const result = await group.postUpdateGroupInfo(groupPresent)
        if(result.code === 0){
          //如果失败了显示提示
          this.showAlert(result.message)
        } else {
          // this.showAlert(result.data)
          this.$store.commit('recordGroupPresent', groupPresent)
          // setTimeout(this.closeTip, 1000)
        }
      },
      deleteUser(){
        this.isShowConfirm = true
        if(this.isSelectedAsGroupAdmin){
          this.confirmMessage = '该成员是群管理员，确认删除吗？'
        }else{
          this.confirmMessage = '确认删除该成员吗？'
        }
      },
      async onConfirm(){
        const result = await group.postQuitGroup({
          groupId:this.$store.state.groupPresent.groupId,
          userId:this.memberSelectedInfo.userId
        })
        if(result.code === 0){
          this.showAlert(result.message)
        }else{
          this.showAlert("删除成功")
          setTimeout(this.back, 1000)
        }
      },
    },
    components: {
      XHeader,
      XInput,
      XSwitch,
      Group,
      Cell,
      XButton,
      Confirm
    }
  }
</script>
<style scoped>
  .info_img {
    height: 50px;
    width: 50px;
    float: right;
    border-radius: 3px;
  }
  .info_label{
    float: right;
    margin-right: 5px;
    color: #5f6368;
  }
  .info {
    width: 95%;
    height: auto;
    margin: 5px auto;
    list-style: none;
  }
  .info li{
    height: auto;
    width: 100%;
    list-style: none;
    border-bottom: #ececec solid;
    margin: 15px auto;
    padding-bottom: 5px;
    padding-left: 2px;
  }
  .base li:first-child{
    height: 50px;
  }
  .base li:first-child span{
    line-height: 50px;
    vertical-align: bottom;
  }
  .base,.degree{
    padding-left: 5px;
  }
  .my_button{
    height: 35px;
    width: auto;
    padding: 3px;
    color: #fff;
    background: #1abc9c;
    border: none;
    font-size: 16px;
    cursor: pointer;
    outline: 0;
    margin-left: 40%;
    border-radius: 3px;
  }
</style>
